/**
 * 公交或车站展示组件
 */
import React, { Component } from 'react';
import { StyleSheet, Text, TouchableOpacity, View } from 'react-native';
import Icon from '../../public/icon';
import NavigationService from '../../../utils/NavigationService';
import { px2dp } from 'rn-xiaobu-utils';
import XiaobuStorage from '../../../utils/XiaobuStorage';
import SearchInfo from '../models/search-info';

export default class SearchItem extends Component {
  static defaultProps = {
    itemOnPress: () => {
    },
    shouldBack: false // 是否必须后退
  }

  /**
   * 组件点击方法
   * @private
   */
  _onPress = () => {
    if (this.props.cacheKey) {
      XiaobuStorage.getItem(this.props.cacheKey).then(res=>{
        let list = []
        if (res) {
          list = JSON.parse(res)
          let isExist = false
          for (let item of list) {
            if (item.id === this.props.id) {
              isExist = true
            }
          }
          if (!isExist) {
            list.unshift(new SearchInfo(this.props.id, this.props.name, this.props.type, this.props.lat, this.props.lng))
          }
        } else {
          list.push(new SearchInfo(this.props.id, this.props.name, this.props.type, this.props.lat, this.props.lng))
        }
        XiaobuStorage.setItem(this.props.cacheKey, JSON.stringify(list))
      })
    }
    if (this.props.shouldBack) {
      // 需要点击返回
      NavigationService.back()
    } else {
      // 不需要点击返回
      if (this.props.type === 1 || this.props.type === 2) {
        // 跳转到公交页
        NavigationService.navigate('Line', {
          id: this.props.id,
          name: this.props.name,
          type: this.props.type,
          direction: 1
        })
      }

      if (this.props.type === 3) {
        // 跳转到同站线路页
        NavigationService.navigate('SiteDetails', {
          id: this.props.id,
          name: this.props.name,
          type: this.props.type,
          lat: this.props.lat,
          lng: this.props.lng,
          title: this.props.name // 标题栏
        })
      }
    }
    // 点击回调函数
    this.props.itemOnPress({
      id: this.props.id,
      name: this.props.name,
      type: this.props.type,
      lat: this.props.lat,
      lng: this.props.lng
    })
  }

  render () {
    return (
      <TouchableOpacity onPress={this._onPress} activeOpacity={0.6}>
        <View style={styles.container}>
          {
            this.props.type === 1 || this.props.type === 2
              ? <Icon name={'bus'} style={styles.icon}
                size={34} color={'#999999'}></Icon>
              : <Icon name={'station'} style={styles.icon}
                size={34} color={'#999999'}></Icon>
          }

          <Text
            style={styles.name}>{isNaN(this.props.name) ? this.props.name : (this.props.type === 1 || this.props.type === 2 ? this.props.name + '路' : this.props.name)}</Text>
        </View>
      </TouchableOpacity>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    height: px2dp(100),
    backgroundColor: '#ffffff',
    flexDirection: 'row',
    alignItems: 'center'
  },
  icon: {
    marginLeft: px2dp(40),
    marginRight: px2dp(30)
  },
  name: {
    color: '#333333'
  }
})